<template>
    <!-- 选择刻印套装时-->
    <!-- 接收参数 groupViewShow是否显示-->
    <!-- 返回事件 close select-->
    <van-popup v-if="isShow" v-model="isShow" closeable round position="bottom" :style="{ height: '60%' }">
        <!-- 套一个小的略小的div 适配滚动条和外圈的圆角 -->
        <div class="popup-container">
            <div class="popup-title-container">
                <h3>选择角色</h3>
                <van-row class="margin-top margin-bottom">
                    <van-radio-group class="type-radio" v-model="radio" direction="horizontal">
                        <van-radio name="0">全部</van-radio>
                        <van-radio name="1">真樱</van-radio>
                        <van-radio name="2">奥山</van-radio>
                        <van-radio name="3">圣树</van-radio>
                        <van-radio name="4">尼罗</van-radio>
                        <van-radio name="5">众星</van-radio>
                        <van-radio name="6">BOSS</van-radio>
                    </van-radio-group>
                </van-row>
            </div>

            <van-grid square :gutter="25" clickable :column-num="4" class="popup-content-container">
                <template v-for="(item) in allRoles_list">
                    <van-grid-item class="role-item-div" v-show="isItemShow(item)"  :text="item.name" 
                        @click="onSelect(item)">
                        <van-image :src="item.icon" height="60" width="60" />
                        <span class="role-name-span">{{ item.per_name }}</span>
                        <span class="role-name-span">{{ item.real_name |realNameFilter1}}</span>
                    </van-grid-item>
                </template>

                <template v-for="(item) in boss_list">
                    <van-grid-item v-show="isItemShow(item)"  :text="item.name" 
                        @click="onSelect(item)">
                        <van-image :src="item.icon" height="60" width="60" />
                        <span class="role-name-span">{{ item.per_name }}</span>
                        <span class="role-name-span">{{ item.real_name |realNameFilter2}}</span>
                    </van-grid-item>
                </template>
                
            </van-grid>
        </div>
    </van-popup>
</template>

<script>
import { SearchServer, TeamServer } from '../../server/servers';

export default {
    name: "",
    props: {
        groupViewShow: Boolean
    },

    created() {
        let vm = this
        setTimeout(() => {
            vm.query();
        }, 2000);
    },

    watch: {
        groupViewShow() {
            this.radio = '0';
        }
    },

    computed: {
        isShow: {
            get() {
                return this.groupViewShow;
            },
            set(val) {
                this.$emit("close");
            }
        }
    },

    filters:{
        realNameFilter1(name){
            return name.replace("天狗","")
        },

        realNameFilter2(name){
            return name.replace("右近卫大将","右卫将")
        }
    },

    data: () => ({
        allRoles_list: null,
        boss_list: null,
        radio: '0',
    }),

    methods: {
        onSelect(item) {
            this.$emit("select", item);
            this.$emit("close");
        },

        query() {
            this.boss_list = TeamServer.queryAllBoss();
            this.allRoles_list = TeamServer.queryAllRoles();
        },

        isItemShow(item) {
            if (this.radio == '0') {
                return "真樱,奥山,圣树,尼罗,众星".match(item.class);
            }

            switch (this.radio) {
                case "1":
                    return "真樱" == item.class;

                case "2":
                    return "奥山" == item.class;
                case "3":
                    return "圣树" == item.class;

                case "4":
                    return "尼罗" == item.class;
                case "5":
                    return "众星" == item.class;
                case "6":
                    return "智械,视骸,人型".match(item.class);
            }

            return false;
        }
    }
}

</script>

<style scoped>
.popup-container {
    /* position: relative; */
    width: 99%;
    height: 80%;
    overflow-y: scroll;
    margin-top: 100px;
}

.popup-title-container {
    position: absolute;
    width: 500px;
    top: 12px;
    left: 0px;
}

.popup-title-container h3 {
    display: block;
    width: 75px;
    margin: auto;
}

.popup-title-container .van-radio{
    width: 15%;
    margin-left:1%;
    margin-right:1% ;
}

.role-item-div{
    height: 90px;
    width: 60px;
}

.role-name-span{
    font-size: 13px;
    display: block;
    text-align: center;
    line-height: 15px;
    height: 15px;
    width: 60px;
}

* {
    -moz-user-select: none;
    -o-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
</style>
